<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级信息管理系统 - 注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#0ea5e9',
                        neutral: '#f8fafc',
                        'neutral-dark': '#1e293b',
                        success: '#10b981',
                        danger: '#ef4444',
                        gold: '#fde68a',
                        formBg: '#fcfdff',
                        inputBorder: '#e0e7f1',
                        inputText: '#1e293b',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system.html-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1)',
                        'card': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
                        'input': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                        'button': '0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.15)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:shadow-lg;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .gradient-bg {
                @apply bg-gradient-to-br from-primary/5 to-accent/5;
            }
            .input-with-icon {
                @apply w-full pl-10 pr-4 py-2.5 rounded-lg border border-inputBorder form-input-focus transition-all duration-200 shadow-input text-inputText;
            }
            .card-animation {
                @apply transition-all duration-500 hover:shadow-elegant;
            }
            .float-animation {
                animation: float 6s ease-in-out infinite;
            }
            .shine-animation {
                animation: shine 4s ease-in-out infinite;
            }
            .scale-animation {
                @apply transition-transform duration-300 hover:scale-105;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
            @keyframes shine {
                0% { opacity: 0.3; transform: scale(0.95); }
                50% { opacity: 0.8; transform: scale(1.05); }
                100% { opacity: 0.3; transform: scale(0.95); }
            }
            /* 固定版权信息到页面底部 */
            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            /* 提示框样式 */
            .toast {
                position: fixed;
                top: 6px;
                right: 6px;
                padding: 12px 16px;
                border-radius: 8px;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                transition: all 0.3s ease;
                z-index: 50;
                display: flex;
                align-items: center;
                transform: translateY(-20px);
                opacity: 0;
            }

            .toast.show {
                transform: translateY(0);
                opacity: 1;
            }

            .toast.success {
                background-color: #10b981;
                color: white;
            }

            .toast.danger {
                background-color: #ef4444;
                color: white;
            }

            .toast.info {
                background-color: #3b82f6;
                color: white;
            }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen font-inter flex items-center justify-center p-4 overflow-x-hidden">
    <!-- 背景装饰元素 -->
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <!-- 顶部装饰 -->
        <div class="absolute top-10 left-10 w-20 h-20 bg-primary/5 rounded-full blur-3xl float-animation"></div>
        <div class="absolute top-20 right-20 w-32 h-32 bg-accent/5 rounded-full blur-3xl float-animation" style="animation-delay: 2s;"></div>
        <div class="absolute bottom-10 left-1/4 w-16 h-16 bg-success/5 rounded-full blur-2xl float-animation" style="animation-delay: 4s;"></div>

        <!-- 星星装饰 -->
        <div class="absolute top-20 left-1/3 w-2 h-2 bg-gold/60 rounded-full shine-animation" style="animation-delay: 0s;"></div>
        <div class="absolute top-32 right-1/4 w-1.5 h-1.5 bg-gold/60 rounded-full shine-animation" style="animation-delay: 1s;"></div>
        <div class="absolute top-40 left-1/2 w-1 h-1 bg-gold/60 rounded-full shine-animation" style="animation-delay: 2s;"></div>
        <div class="absolute top-56 right-1/3 w-1.5 h-1.5 bg-gold/60 rounded-full shine-animation" style="animation-delay: 3s;"></div>
        <div class="absolute top-64 left-1/4 w-2 h-2 bg-gold/60 rounded-full shine-animation" style="animation-delay: 4s;"></div>
    </div>

    <div class="relative w-full max-w-md z-10">
        <!-- 卡片 -->
        <div class="bg-white rounded-3xl shadow-card overflow-hidden card-animation">
            <!-- 顶部渐变区域 -->
            <div class="bg-gradient-to-r from-primary to-accent p-8 text-white relative overflow-hidden">
                <!-- 装饰元素 -->
                <div class="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full"></div>
                <div class="absolute -bottom-5 -left-5 w-20 h-20 bg-white/5 rounded-full"></div>

                <h1 class="text-[clamp(1.75rem,4vw,2.25rem)] font-bold relative z-10 tracking-tight">班级信息管理系统</h1>
                <p class="mt-2 opacity-90 relative z-10 text-lg">注册您的账户</p>
            </div>

            <!-- 表单区域 -->
            <div class="p-8 md:p-10 bg-formBg rounded-lg">
                <form id="registerForm" class="space-y-4">
                    <!-- 用户名 -->
                    <div class="relative scale-animation">
                        <label for="username" class="block text-sm font-medium text-neutral-dark mb-1">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-secondary text-base">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="username" name="username" placeholder="请输入用户名"
                                class="input-with-icon" required>
                        </div>
                    </div>

                    <!-- 学工号 -->
                    <div class="relative scale-animation">
                        <label for="studentId" class="block text-sm font-medium text-neutral-dark mb-1">学工号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-secondary text-base">
                                <i class="fa fa-id-card"></i>
                            </span>
                            <input type="text" id="studentId" name="studentId" placeholder="请输入学工号"
                                class="input-with-icon" required>
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="relative scale-animation">
                        <label for="password" class="block text-sm font-medium text-neutral-dark mb-1">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-secondary text-base">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="password" name="password" placeholder="请输入密码"
                                class="input-with-icon" required>
                        </div>
                    </div>

                    <!-- 确认密码 -->
                    <div class="relative scale-animation">
                        <label for="confirmPassword" class="block text-sm font-medium text-neutral-dark mb-1">确认密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-secondary text-base">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码"
                                class="input-with-icon" required>
                        </div>
                    </div>

                    <!-- 用户类型 -->
                    <div class="relative scale-animation">
                        <label for="role" class="block text-sm font-medium text-neutral-dark mb-1">用户类型</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-secondary text-base pointer-events-none">
                                <i class="fa fa-user-circle"></i>
                            </span>
                            <select id="role" name="role"
                                class="input-with-icon appearance-none bg-formBg">
                                <option value="student">学生</option>
                                <option value="teacher">教师</option>
                                <option value="admin">管理员</option>
                            </select>
                            <span class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-secondary text-base">
                                <i class="fa fa-chevron-down"></i>
                            </span>
                        </div>
                    </div>

                    <!-- 注册按钮 -->
                    <button type="button" id="registerBtn"
                        class="w-full bg-primary text-white font-medium py-3 px-6 rounded-lg shadow-button btn-hover transition-all duration-300 flex items-center justify-center text-lg">
                        <span>创建账户</span>
                        <i class="fa fa-arrow-right ml-3"></i>
                    </button>

                    <!-- 已有账户提示 -->
                    <p class="text-center text-sm text-secondary">
                        已有账户？<a href="{{ url_for('login') }}" class="text-primary hover:underline transition-colors duration-200 font-medium">立即登录</a>
                    </p>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="text-center text-secondary text-sm">
        <div class="flex flex-col md:flex-row justify-center items-center gap-4">
            <div>
                <p>© 2025 班级信息管理系统</p>
            </div>
            <div class="hidden md:block">|</div>
            <div>
                <p>保护您的隐私和数据安全</p>
            </div>
            <div class="hidden md:block">|</div>
            <div class="flex gap-3">
                <a href="#" class="hover:text-primary transition-colors duration-200">
                    <i class="fa fa-question-circle mr-1"></i>帮助中心
                </a>
                <a href="#" class="hover:text-primary transition-colors duration-200">
                    <i class="fa fa-shield mr-1"></i>隐私政策
                </a>
                <a href="#" class="hover:text-primary transition-colors duration-200">
                    <i class="fa fa-file-text mr-1"></i>使用条款
                </a>
            </div>
        </div>
        <!-- 底部装饰线条 -->
        <div class="mt-6 flex justify-center space-x-3">
            <div class="w-16 h-0.5 bg-gradient-to-r from-transparent to-primary/30 rounded-full"></div>
            <div class="w-20 h-0.5 bg-gradient-to-r from-primary/30 to-accent/30 rounded-full"></div>
            <div class="w-16 h-0.5 bg-gradient-to-r from-accent/30 to-transparent rounded-full"></div>
        </div>
        <div class="mt-4 text-xs opacity-70">
            <p>本系统仅供教学使用，所有数据均为模拟数据</p>
        </div>
    </footer>
    <script src="{{ url_for('static', filename='js/register.js') }}"></script>
</body>
</html>